<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>点位聚合</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="mapContainer" style="position: relative;"></div>
</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    window.app = new GE.App('mapContainer', {
        position: [120.17636004934425, 30.28822034762418, 1500], //相机的位置
        lookAt: [120.17636004934425, 30.28822034762418, 0], //相机看向的地图位置
        cameraScrollSpeed: 5, //鼠标滚动时，控制相机移动的速度
        minZoom: 3, //允许地图的最小层级
        maxZoom: 18, //允许地图的最大层级
        ambientLightIntensity: 5,
        useDefaultTexture: true, //是否使用瓦片默认纹理
        baseLayer: [
            //影像底图
            {
                url: ' https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', //影像底图的url
                // url: 'http://115.236.87.26:8848/googleTiles/china_image/{z}/{y}/{x}.jpg',
                urlDecimal: true, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                tileType: 'image', //影像底图
                canNotSelect: false, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            }
        ]
    });
    addPOI(); //添加poi

    function addPOI() {
        let pois = [];
        for (let i = 0; i < 100; i++) {
            let poi = new GE.Poi({
                url: 'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/images/tower.png', //模型图片路径
                position: new GE.Point(120.170646 + (i / 10) * 0.001, 30.28362 + (i % 10) * 0.001, 10), //POI位置，不传就是0,0,0原点
                name: 'POI的名字', //显示的文字名称
                size: 200, //文字大小
                isBold: true, //是否加粗
                baseImageSize: 1000, //图片大小（长宽一致，都是这个值）
                showText: true,//是否显示文字
                backGroundStyle: "#000000", //字体背景色
                textStyle: '#ffffff',//字体颜色
                depthTest: false,//是否开启深度测试
                textfont: 'sans-serif'//字体格式 字体的支持情况跟操作系统和浏览器环境有关，sans-serif是默认字体都支持，其余字体不保证正常显示
            })
            app.add(poi);
            pois.push(poi);
        }


        let cluster = new GE.Cluster({
            pixelRange: 30, //这个值越大，点位聚合程度越高
            //generateClusterMarker表示生成聚合标记的回调函数，如果不传这个参数被聚合的对象会直接被隐藏
            generateClusterMarker: function (clusterData) {
                const div = document.createElement('div');
                const button = document.createElement('button');
                button.innerText = clusterData.count;  //clusterData的count属性代表聚合对象的数量
                button.onclick = function (e) {
                    //clusterData的datas属性代表被聚合的对象
                    console.log(clusterData.datas);
                }
                div.appendChild(button);
                let marker = new GE.HtmlMarker(div);//这里用的是htmlmarker表示聚合标记，也可以自行替换成模型或者其他对象
                return marker;
            }
        });
        //将需要被聚合的对象添加到cluster中，被聚合的对象可以是POI，可以是htmlMarker，也可以是模型，多边形，动效组件等对象
        cluster.add(pois);
    }

</script>

</html>